{%- liquid
  assign showQuickLinks = false
  if settings.quick_link_menu != blank and linklists[settings.quick_link_menu].links.size > 0
    assign showQuickLinks = true
  endif

  assign paginate_count = 12
-%}

  <div class="container my-4 my-md-5 my-lg-6">
    <div class="template-search mw-text-4">
      {% render 'predictive-search-form', 
        showQuickLinks: showQuickLinks,
        show_overlay: true
        search_types: "article,product,page",
        position: "results" %}
    </div>
  </div>
  
    {%- if search.performed -%}
      {%- if search.results_count <= 0 and search.filters == empty -%}
        <div class="no-results">
          <div class="container">
            <hr class="my-0">
            <div class="mt-4 mt-md-5 mt-lg-6 mb-8 mb-md-7 mb-lg-9 mw-text-5">
              <p class="mb-4 no-results-title">{{ 'sections.custom_search.empty_html' | t:terms: search.terms }}</p>
              <div>
                {{ section.settings.no_results_content | replace: '<p>', '<p class="mb-0">' }}
              </div>
            </div>
          </div>
        </div>
      {%- else -%}
        <div class="my-4 my-md-5 my-lg-6">
          {%- liquid
            assign show_products = false
            assign show_articles = false
            assign show_pages = false
            assign tab_counts = 0

            paginate search.results by 100000000
              assign search_result_products = search.results | where: 'object_type', 'product'
              assign search_result_articles = search.results | where: 'object_type', 'article'
              assign search_result_pages = search.results | where: 'object_type', 'page'
            endpaginate

            if search_result_products.size > 0
              assign show_products = true
              assign tab_counts = tab_counts | plus: 1
            endif
            if search_result_articles.size > 0
              assign show_articles = true
              assign tab_counts = tab_counts | plus: 1
            endif
            if search_result_pages.size > 0
              assign show_pages = true
              assign tab_counts = tab_counts | plus: 1
            endif

            assign sort_by = search.sort_by | default: search.default_sort_by
            assign terms = search.terms | escape
            assign search_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
          -%}

          {%- comment -%}tabs{%- endcomment -%}
          {% if tab_counts > 1 %}
            <div class="container search-result-tab-container">
              <ul class="nav tab-content" id="pills-tab" role="tablist">
                {% if show_products %}
                  <li class="" role="presentation">
                    <a class="tab-item active cursor-pointer" id="pills-home-tab" data-bs-toggle="tab" data-bs-target="#tabs-products" role="tab" aria-controls="tabs-products" aria-selected="true">{{ 'sections.custom_search.products' | t }}</a>
                  </li>
                {% endif %}
                {% if show_articles %}
                  <li role="presentation">
                    <a class="tab-item cursor-pointer {% unless show_products %}active{% endunless %}" id="pills-home-tab" data-bs-toggle="tab" data-bs-target="#tabs-articles" role="tab" aria-controls="tabs-articles" {% if show_products %}aria-selected="false"{% else %}aria-selected="true"{% endif %}>{{ 'sections.custom_search.blogs' | t }}</a>
                  </li>
                {% endif %}
                {% if show_pages %}
                  <li role="presentation">
                    <a class="tab-item cursor-pointer {% unless show_products or show_articles %}active{% endunless %}" id="pills-home-tab" data-bs-toggle="tab" data-bs-target="#tabs-pages" role="tab" aria-controls="tabs-pages" {% if show_products or show_articles %}aria-selected="false"{% else %}aria-selected="true"{% endif %}>{{ 'sections.custom_search.pages' | t }}</a>
                  </li>
                {% endif %}
              </ul>
            </div>
          {% endif %}

          {%- comment -%}content{%- endcomment -%}
          <div class="tab-content" id="pills-tabContent">
            {% if show_products or search.filters != empty %}
              <!-- product -->
              <div class="tab-pane fade show active" id="tabs-products" role="tabpanel" aria-labelledby="pills-home-tab">
                <div class="container my-3 my-md-4 my-lg-5">
                  <div class="result-count">
                    {{ 'sections.custom_search.search_results_with_count' | t: count: search_result_products.size }}
                  </div>
                </div>
                <hr>
                {%- comment -%}filter and tab{%- endcomment -%}
                {%- if search.filters != empty -%}
                  {%- render 'facets', results: search -%}
                {%- endif -%}
                <div class="as-product-grid-container product-grid-container results-margin" data-id="{{ section.id }}">
                <waterfalls-collapse>
                  <div class="container as-results-product" >
                    {% if search_result_products.size == 0 and search.filters != empty %}
                      <div class="py-0 my-8 my-lg-9 py-lg-4">
                        <div class="h5 text-center mw-text-5 mx-auto mb-0">
                          {{ 'sections.custom_search.empty_product' | t }}<br>
                          {{ 'sections.custom_search.use_fewer_filters_html' | t: link: search_url }}
                        </div>
                      </div>
                    {% else %}
                    {%- comment -%}product card{%- endcomment -%}
                      {% assign add_image_border = settings.add_image_border %}
                      <div class="row mx-auto mb-6 mb-md-7 {% if add_image_border == true %}border-top border-start{% endif %}">
                          {% paginate search.results by 100000000 %}
                            {%- for item in search_result_products limit: paginate_count -%}
                              <div class="col-6 col-md-4 col-lg-3 px-0 {% if add_image_border == true %}border-end border-bottom{% endif %}">
                                {% render 'product-card',
                                  product_card_product: item,
                                  media_size: settings.image_ratio,
                                  show_secondary_image: settings.show_secondary_image,
                                  add_image_padding: settings.add_image_padding,
                                  show_vendor: settings.show_vendor     
                                %}
                              </div>
                            {%- endfor -%}
                          {% endpaginate %}
                          {%- for item in search_result_products offset: paginate_count -%}
                            <div class="as-hide-item d-none col-6 col-md-4 col-lg-3 px-0 {% if add_image_border == true %}border-end border-bottom{% endif %}">
                              {% render 'product-card',
                                product_card_product: item,
                                media_size: settings.image_ratio,
                                show_secondary_image: settings.show_secondary_image,
                                add_image_padding: settings.add_image_padding,
                                show_vendor: settings.show_vendor     
                              %}
                            </div>
                          {%- endfor -%}
                      </div>
                      {% if search_result_products.size > paginate_count %}
                      <div class="text-center mt-6 mt-lg-7">
                        <a class="btn btn-link link-primary as-view-all-btn ">{{ 'sections.custom_search.view_all' | t }}</a>
                      </div>
                      {% endif %}

                    {% endif %}
                  </div>
                </waterfalls-collapse>
                </div>

              </div>
            {% endif %}
            {% if show_articles %}
              <div class="tab-pane fade {% unless show_products %}show active {% endunless %}" id="tabs-articles" role="tabpanel" aria-labelledby="pills-profile-tab">
                <div class="container my-3 my-md-4 my-lg-5">
                  <div class="result-count">
                    {{ 'sections.custom_search.search_results_with_count' | t: count: search_result_articles.size }}
                  </div>
                </div>
                <hr>
                <waterfalls-collapse>
                <div class="container results-margin content-result-container">
                  {%- for item in search_result_articles limit: paginate_count -%}
                    <div class="{% unless forloop.first %}mt-3 mt-md-4 mt-lg-5{% endunless %}">
                      <div class="position-relative">
                        <a class="stretched-link" {% if item.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %}  href="{{item.url}}"></a>
                        {%- if settings.show_blog_posts_tag -%}
                          {% assign blogName = item.handle | split: '/' %}
                          <p class="mb-2 small">{{blogName[0]}}</p>
                        {%- endif -%}
                        <h3 class="mb-2 content-title">{{ item.title }}</h3>
                        {%- if settings.show_excerpt -%}
                          {%- if item.excerpt.size > 0 or item.content.size > 0 -%}
                            <div class="mb-0 ellipsis-2 text-muted content-expert">
                              {%- if item.excerpt.size > 0 -%}
                                {{ item.excerpt | strip_html | truncatewords: 70 | highlight: search.terms }}
                              {%- else -%}
                                {{ item.content | strip_html | truncatewords: 70 | highlight: search.terms }}
                              {%- endif -%}
                            </div>
                          {%- endif -%}
                        {%- endif -%}
                        <hr class="mt-3">
                      </div>
                    </div>
                  {%- endfor -%}
                  {% if search_result_articles.size > paginate_count %}
                    {%- for item in search_result_articles offset: paginate_count -%}
                      <div class="as-hide-item d-none {% unless forloop.first %}mt-3 mt-md-4 mt-lg-5{% endunless %}">
                        <div class="position-relative">
                          <a class="stretched-link" {% if item.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %}  href="{{item.url}}"></a>
                          {%- if settings.show_blog_posts_tag -%}
                            {% assign blogName = item.handle | split: '/' %}
                            <p class="mb-2 small">{{blogName[0]}}</p>
                          {%- endif -%}
                          <h3 class="mb-2 content-title">{{ item.title }}</h3>
                          {%- if settings.show_excerpt -%}
                            {%- if item.excerpt.size > 0 or item.content.size > 0 -%}
                              <div class="mb-0 ellipsis-2 text-muted content-expert">
                                {%- if item.excerpt.size > 0 -%}
                                  {{ item.excerpt | strip_html | truncatewords: 70 | highlight: search.terms }}
                                {%- else -%}
                                  {{ item.content | strip_html | truncatewords: 70 | highlight: search.terms }}
                                {%- endif -%}
                              </div>
                            {%- endif -%}
                          {%- endif -%}
                          <hr class="mt-3">
                        </div>
                      </div>
                    {%- endfor -%}
                    <div class="text-center mt-6 mt-lg-7">
                      <a class="btn btn-link link-primary as-view-all-btn ">{{ 'sections.custom_search.view_all' | t }}</a>
                    </div>
                  {% endif %}
                </div>
                </waterfalls-collapse>
              </div>
            {% endif %}
            {% if show_pages %}
              <div class="tab-pane fade {% unless show_products and show_articles %}show active {% endunless %}" id="tabs-pages" role="tabpanel" aria-labelledby="pills-contact-tab">
                <div class="container my-3 my-md-4 my-lg-5">
                  <div class="result-count">
                    {{ 'sections.custom_search.search_results_with_count' | t: count: search_result_pages.size }}
                  </div>
                </div>
                <hr>
                <waterfalls-collapse>
                <div class="container results-margin content-result-container">
                  {%- for item in search_result_pages -%}
                    <div class="content-result-item position-relative {% unless forloop.first %}mt-3 mt-md-4 mt-lg-5{% endunless %}">
                      <a class="stretched-link" {% if item.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{item.url}}"></a>
                      <h3 class="h4 content-title mb-2">{{ item.title }}</h3>

                      <hr class="mt-3">
                    </div>
                  {%- endfor -%}
                  {% if search_result_pages.size > paginate_count %}
                    {%- for item in search_result_pages offset: paginate_count -%}
                    <div class="as-hide-item d-none content-result-item position-relative {% unless forloop.first %}mt-3 mt-md-4 mt-lg-5{% endunless %}">
                      <a class="stretched-link" {% if item.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{item.url}}"></a>
                      <h3 class="h4 content-title mb-2">{{ item.title }}</h3>

                      <hr class="mt-3">
                    </div>
                    {%- endfor -%}
                    <div class="text-center mt-6 mt-lg-7">
                      <a class="btn btn-link link-primary as-view-all-btn ">{{ 'sections.custom_search.view_all' | t }}</a>
                    </div>
                  {% endif %}
                </div>
                </waterfalls-collapse>
              </div>
            {% endif %}
          </div>
        </div>
      {%- endif -%}
    {%- endif -%}


{% schema %}
  {
    "name": "Search Results",
    "class": "search-results",
    "tag": "section",
    "settings": [
      {
        "type": "richtext",
        "id": "no_results_content",
        "label": "No results content",
        "default": "<p>Sorry, no matches were found.Try a new search or use our suggestions.</p>"
      }
    ]
  }
{% endschema %}